<template>
  <div class="addOrder">
    <Group label-align="left">
      <div class='stockModel'>
        <x-input title="订单号" required placeholder="填写订单号" v-model="saveId"></x-input>
      </div>
      <div class='stockBrand'>
        <x-input title="品牌" placeholder="填写品牌" v-model="saveBrand"></x-input>
      </div>
      <div class='stockGender'>
        <!--<popup-picker title="性别" :data="showGender" v-model="saveGender" placeholder="请选择性别"></popup-picker>-->
        <x-input title="性别" placeholder="填写性别" v-model="saveGender"></x-input>
      </div>
      <div class='stockPrice'>
        <x-input title="价格" placeholder="填写价格" type="number" v-model="savePrice"></x-input>
      </div>
      <!--<x-input title="鞋号" required placeholder="填写鞋号" type="number" :max="2" v-model="saveSize"></x-input>-->
      <!--<popup-picker title="鞋号" required :data="showSize" v-model="saveSize" placeholder="填写鞋号"></popup-picker>-->
      <div class='stockPrice'>
        <x-input title="鞋号" required placeholder="填写鞋号" type="number" v-model="saveSize"></x-input>
      </div>
      <div class='stockPrice'>
        <x-input title="数量" required placeholder="填写数量" type="number" v-model="saveNum"></x-input>
      </div>
      <div class='stockPrice'>
        <x-input title="颜色" placeholder="填写颜色" v-model="saveColor"></x-input>
      </div>
      <!--<popup-picker title="颜色" required :data="showColor" v-model="saveColor" placeholder="请选择颜色"></popup-picker>-->
      <x-textarea title="备注" v-model="saveContent" :max="40" placeholder="填写备注"></x-textarea>
    </Group>
    <br>
    <br>
    <br>
    <flexbox>
      <flexbox-item>
        <div class="flex-demo"><x-button @click.native="showOK" type="primary">保存</x-button></div>
      </flexbox-item>
      <flexbox-item><div class="flex-demo"><x-button type="warn" @click.native="showPlugin">放弃</x-button></div></flexbox-item>
    </flexbox>
  </div>
</template>

<script>
  import { XInput, Group, XButton, Cell, Previewer, TransferDom, XImg, Swipeout, SwipeoutItem, SwipeoutButton, GroupTitle, PopupPicker, Picker, Selector, Checker, CheckerItem, XTextarea, Divider, Flexbox, FlexboxItem, Confirm, Alert  } from 'vux'
  import $ from 'jquery'
  export default {
    directives: {
      TransferDom
    },
    components: {
      XInput,
      XImg,
      XButton,
      Group,
      Cell,
      Previewer,
      Swipeout,
      SwipeoutItem,
      SwipeoutButton,
      GroupTitle,
      PopupPicker,
      Picker,
      Selector,
      Checker,
      CheckerItem,
      XTextarea,
      Divider,
      Flexbox,
      FlexboxItem,
      Confirm,
      Alert
    },
    name: 'addOrder',
    data () {
      return {
        status: true,
        isOnly: true,
        orderId: '',
        orderDate: '',
        orderData: [],
        orderContent: '',
        saveId: '',
        saveBrand: '',
        saveGender: '',
        savePrice: '',
        saveSize: '',
        saveNum: '',
        saveColor: '',
        saveContent: '',
        saveImg: '',
        options: {
          getThumbBoundsFn (index) {
            // find thumbnail element
            let thumbnail = document.querySelectorAll('.previewer-demo-img')[index]
            // get window scroll Y
            let pageYScroll = window.pageYOffset || document.documentElement.scrollTop
            // optionally get horizontal scroll
            // get position of element relative to viewport
            let rect = thumbnail.getBoundingClientRect()
            // w = width
            return {x: rect.left, y: rect.top + pageYScroll, w: rect.width}
            // Good guide on how to get element coordinates:
            // http://javascript.info/tutorial/coordinates
          }
        }
      }
    },
    methods: {
      showBox () {
        this.status = !this.status
      },
      showOK () {
        let self = this
        self.isOnly = true
        self.orderDate = self.getNowFormatDate()
        let order = {
          orderId: self.saveId,
          orderBrand: self.saveBrand,
          orderGender: self.saveGender,
          orderPrice: self.savePrice,
          orderSize: self.saveSize,
          orderNum: self.saveNum,
          orderColor: self.saveColor,
          orderContent: self.saveContent,
          orderDate: self.orderDate
        }
        if (localStorage.getItem('order')) {
          self.orderData = localStorage.getItem('order')
          self.orderData = JSON.parse(self.orderData)
          $.each(self.orderData,function (k) {
            if(self.orderData[k].orderId == self.saveId){
              self.$vux.toast.show({
                text: '该订单号已存在！',
                type: 'warn'
              })
              self.isOnly = false
            }
          })
        } else {
          self.orderData.push(order)
        }
        if(self.isOnly){
          self.orderData.unshift(order)
          self.orderData = JSON.stringify(self.orderData)
          localStorage.setItem('order', self.orderData)
          self.$vux.toast.show({
            text: '保存成功！'
          })
        }
      },
      getNowFormatDate () {
        let date = new Date();
        let seperator1 = "-";
        let seperator2 = ":";
        let year = date.getFullYear();
        let month = date.getMonth() + 1;
        let strDate = date.getDate();
        if (month >= 1 && month <= 9) {
          month = "0" + month;
        }
        if (strDate >= 0 && strDate <= 9) {
          strDate = "0" + strDate;
        }
        let currentdate = year + seperator1 + month + seperator1 + strDate
          + " " + date.getHours() + seperator2 + date.getMinutes()
          + seperator2 + date.getSeconds();
        return currentdate;
      },
      showPlugin () {
        let self = this
        this.$vux.confirm.show({
          title: '确定放弃保存?',
          content: '',
          onCancel () {
            console.log('plugin cancel')
          },
          onConfirm () {
            self.$router.push({path: '/'})
          }
        })
      },
    },
    mounted () {
    }
  }
</script>

<style scoped>
  .addOrder{
    padding: 0 15px;
  }
  #sendImg{
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    opacity: 0;
  }
</style>
